<template>
  <!-- 植物库 -->
  <div class="plants">
    <!-- 分类树 -->
    <SideTree
      :categoryList="copyCategoryList"
      @clickCategory="clickCategory"
      ref="sideTree"
      @sideTreeEdit="sideTreeEdit"
    ></SideTree>

    <!-- 编辑分类 -->
    <EditCategory
      v-if="isSideTreeEdit"
      :categoryList="copyCategoryList"
      :crumbs="crumbsPlan"
      @clickCategory="clickCategory"
      @sideTreeEdit="sideTreeEdit"
      @getMajorCategoryTree="getMajorCategoryTree"
    ></EditCategory>

    <!-- 植物列表 -->
    <plansList
      v-if="!isSideTreeEdit && !isUpdatePlant"
      @ShowHidePlant="ShowHidePlant"
      :plantTypeId="plantTypeId"
      :activeCategory="activeCategory"
      :categoryList="copyCategoryList"
      ref="plansListRef"
    ></plansList>

    <!-- 新增/编辑植物 -->
    <UpdatePlant
      v-if="isUpdatePlant"
      :editItemData="editItemData"
      @ShowHidePlant="ShowHidePlant"
      :categoryList="copyCategoryList"
    ></UpdatePlant>
  </div>
</template>

<script setup>
// 获取分类树
import { GetPlanClassTree } from "@/api/plans";

import SideTree from "./components/SideTree"; // 侧边分类树
import plansList from "./components/PlansList"; // 植物列表
import EditCategory from "./components/EditCategory"; // 编辑分类
import UpdatePlant from "./components/UpdatePlant.vue"; // 新增编辑植物
import {
  computed,
  nextTick,
  onBeforeUnmount,
  onMounted,
  provide,
  ref,
  watch,
} from "vue";

let isSideTreeEdit = ref(false); // 是否显示分类树 默认false 不显示
let isUpdatePlant = ref(false); // 是否显示编辑植物 默认false
const activeCategory = ref({}); // 当前选中的分类
let editItemData = ref(null) // 要修改的数据

// 点击分类的层级面包屑
const crumbsPlan = ref([
  {
    id: 0,
    plantTypeName: "所有类别",
  },
]);

onMounted(() => {
  getMajorCategoryTree(); // 获取分类树
});

const copyCategoryList = ref([]); // 原始 分类数据
const categoryList = ref([]); // 分类数据

const sideTree = ref(null);
const plansListRef = ref(null);

/** 监听选中的分类 */
watch(
  () => activeCategory,
  () => {
    categoryList.value = JSON.parse(
      JSON.stringify(
        findTree(copyCategoryList.value, activeCategory.value?.id)?.subset || []
      )
    );

    // 没有选中的分类
    if (!activeCategory.value) {
      categoryList.value = JSON.parse(JSON.stringify(copyCategoryList.value));
    }
  },
  { deep: true }
);

/**
 * 获取分类树
 */
const getMajorCategoryTree = async (val) => {
  try {
    let result = await GetPlanClassTree();

    copyCategoryList.value = result?.data || []; // 原始数据

    nextTick(() => {
      // 设置分类树高亮
      sideTree.value.handleSetTreeLight(activeCategory.value?.id || null);
    });

    // 当没有选中分类 赋值数据
    if (!activeCategory.value || activeCategory.value == -1) {
      categoryList.value = result?.data || [];
      return;
    }

    //  分类 保存的时候 -
    if (val === "update") {
      // 重新赋值数据--- 吧id给赋值上去， 解决二级保存 出现的Bug
      categoryList.value = JSON.parse(
        JSON.stringify(
          findTree(copyCategoryList.value, activeCategory.value?.id)?.subset ||
          []
        )
      );
    }
  } catch (error) {
    console.log(error);
  }
};

/** 闭包获取当前id下的数据 */
const findTree = (list, id) => {
  for (const item of list) {
    if (item.id == id) {
      return item;
    } else {
      if (item.subset) {
        let f = findTree(item.subset || [], id);
        if (f) return f;
      }
    }
  }
  return null;
};

/** 显示/隐藏 编辑分类模块 */
const sideTreeEdit = (val) => {
  isSideTreeEdit.value = val;
};

/** 显示隐藏 编辑植物 */
const ShowHidePlant = (val, item = null) => {

  isUpdatePlant.value = val; // 隐藏或者显示编辑模块

  editItemData = item

  if (val) return;
  plansListRef.value?.hanleGetPlanList(); // 查询植物列表
};

// 使用 provide 函数将函数注入到组件树中
provide("editPlanItem", ShowHidePlant);

let plantTypeId = ref(0) // 当前点击的分类id

/**
 * 订阅 分类的点击
 * @param {Object} data 当前点击的分类
 * @param {Array} crumbs 点击分类的层级面包屑
 */
const clickCategory = (data, crumbs) => {

  nextTick(() => {
    // 设置分类树高亮
    sideTree.value.handleSetTreeLight(data?.id || null);
  });

  plantTypeId.value = data?.id || 0
  activeCategory.value = data;

  // XXX:打开此代码可以创建二级分类。 -- 目前暂时不需要
  // crumbsPlan.value = [{ id: 0, plantTypeName: "所有分类" }, ...crumbs];
};
</script>

<style lang="scss" scoped>
.plants {
  display: flex;
  padding: 28px;
  align-items: flex-start;
}
</style>
